<template>
    <div style="padding: 20px">
        <el-button type="success" class="filter-item" icon="el-icon-edit" @click="addData()"
                   style="margin-bottom: 20px">添加老师
        </el-button>

        <!-- el:table 表格 :data='循环的数组' -->
        <el-table :data="productList" border stripe style="width: 100%">
            <!-- prop='属性名' label='网页展示的标签' -->
            <el-table-column prop="id" label="ID" width="180" align="center"></el-table-column>
            <el-table-column label="姓名" width="180" align="center">
                <template slot-scope="scope">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item>
                            <router-link :to="{path:'/table/teacherlist/teacherdetail', query: {id:scope.row.id}}">
                                {{scope.row.name}}
                            </router-link>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="password" align="center" label="密码"></el-table-column> -->
            <el-table-column prop="phone" align="center" label="手机"></el-table-column>
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item>
                            <p v-for="i in scope.row.clazzs" :key="i.id">
                                <router-link :to="{path:'/table/clazzlist/clazzdetail', query: {id:i.id}}">{{i.name}}
                                </router-link>
                            </p>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" label="操作" width="300">
                <!-- 编辑按钮组 -->
                <template slot-scope="scope">
                    <el-button type="success" @click="timetable(scope.row)" size="small">课程表</el-button>
                    <el-button type="primary" @click="handleClick(scope.row)" size="small">编辑</el-button>
                    <el-button type="danger" @click="handledelete(scope.row)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--
            分页功能
            @size-change:显示行数发生改变执行的方法
            @current-change:页数改变发生执行的方法
            :page-sizes:可提供用户选择显示行数的选择
            :current-page.sync:高亮显示页面
            layout="total, sizes, prev, pager, next, jumper" :分页功能--统计,上一页,页数,下一页和跳转
            :total:统计拥有多少条数据
         -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 40]"
                :current-page.sync="currPage"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <!-- 点击编辑弹出的dialog -->
        <el-dialog :visible.sync="dialogFormVisible" :modal-append-to-body='false'>
            <el-form ref="dataForm" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
                <el-form-item label="ID">
                    <el-input v-model="user.id" autocomplete="off" :disabled="isAdd == false"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="user.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="user.password" type="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="user.phone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false"> 取消</el-button>
                <el-button type="primary" @click="updateData()">提交</el-button>
            </div>
        </el-dialog>
        <router-view></router-view>
    </div>

</template>

<script>
    import axios from 'axios'
    import teacherdetail from './TeacherDetail'

    export default {
        name: "List",
        data() {
            return {
                productList: [],
                pos: 0, //坐标
                pageSize: 10, //每一页显示的数据条数
                total: 150, //记录总数
                maxPage: 99,//最大页数
                currPage: 1,	//当前页
                dialogFormVisible: false,//dialog框是否显示
                isAdd: false,//判断是否为添加方法或者更新方法
                user:		//双向绑定学生信息
                    {
                        id: "",
                        name: "",
                        password: "",
                        phone: ""
                    },
                id: "",
                clientWidth: 0,
                isFather: true
            };
        },
        components: {
            "teacherdetail": teacherdetail
        },
        methods: {
            //分页显示行数发生改变
            handleSizeChange(pageSizes) {
                //每一页显示的数据条数
                this.pageSize = pageSizes
                //从新加载数据
                this.pageHandler(0)
            },
            //分页页数发生改变
            handleCurrentChange(currentPage) {
                this.currPage = currentPage;
                //改变数据
                this.pageHandler((this.currPage - 1) * this.pageSize)
            },
            //删除学生事件
            handledelete(row) {
                //使用 axios 调用后台接口
                var url = "/api/teacher?id=" + row.id;
                axios.delete(url).then(res => {
                    this.currPage = 1;
                    this.handleCurrentChange(1);
                }).catch(err => {
                    this.$message.error('错了哦，请重新操作')
                    console.log(err);
                })
            },
            //编辑学生事件
            handleClick(row) {
                //因为是更新用户所以参数为false
                this.isAdd = false;
                //让dialog显示
                this.dialogFormVisible = true;
                //动态获取学生信息
                this.user.id = row.id;
                this.user.name = row.name;
                this.user.password = "";
                this.user.phone = row.phone;
            },
            //pagehandler方法 跳转到坐标
            pageHandler(pos) {
                //防止传入坐标错误,进行修改
                if (pos <= 0) {
                    pos = 0;
                }
                if (pos >= this.total) {
                    if (this.total % this.pageSize == 0) {
                        pos = this.total - this.pageSize;
                    } else {
                        pos = this.total - this.total % this.pageSize;
                    }
                }
                this.pos = pos;
                //使用 axios 调用后台接口
                var url = "/api/teacher?pos=" + this.pos + "&rows=" + this.pageSize
                if (this.search != null) {
                    url += "&search=" + this.search;
                }
                axios.get(url).then(res => {
                    //将数据绑定对应属性中
                    this.productList = res.data.list;
                    this.total = parseInt(res.data.total);
                    //设置最大页数,向下取整
                    this.maxPage = Math.ceil(this.total / this.pageSize);
                }).catch(err => {
                    console.log("error");
                })
            },
            //更新和添加公用同一个方法
            updateData() {
                if (this.user.id == "")
                    return this.$message.error('用户ID不能为空，请重新操作');
                if (this.user.name == "")
                    return this.$message.error('用户名不能为空，请重新操作');
                if (this.user.password == "") {
                    this.$message('默认密码用用户ID');
                    this.user.password = this.user.id
                }
                //判断是否添加方法,否则进入更新方法
                if (this.isAdd == false) {
                    var url = "/api/teacher";//?id="+this.user.id+"&name="+this.user.name+"&password="+this.user.password+"&phone="+this.user.phone;
                    axios.put(url, {
                        id: this.user.id,
                        name: this.user.name,
                        password: this.user.password,
                        phone: this.user.phone
                    }).then(res => {
                        this.dialogFormVisible = false;
                        this.currPage = 1;
                        this.handleCurrentChange(1);
                        this.$message("更新成功!");
                    }).catch(err => {
                        this.$message.error('错了哦，请重新操作')
                        console.log(err);
                    })
                }
                if (this.isAdd == true) {
                    if (this.user.id == "")
                        return this.$message.error('用户ID不能为空，请重新操作');
                    if (this.user.name == "")
                        return this.$message.error('用户名不能为空，请重新操作');
                    if (this.user.password == "") {
                        this.$message('默认密码用用户ID');
                        this.user.password = this.user.id
                    }
                    var url = "/api/teacher";//?id="+this.user.id+"&name="+this.user.name+"&password="+this.user.password+"&phone="+this.user.phone;
                    axios.post(url, {
                        id: this.user.id,
                        name: this.user.name,
                        password: this.user.password,
                        phone: this.user.phone
                    }).then(res => {
                        this.dialogFormVisible = false;
                        this.currPage = 1;
                        this.handleCurrentChange(1);
                        this.$message("更新成功!");
                    }).catch(err => {
                        this.$message.error('错了哦，请重新操作')
                        console.log(err);
                    })
                }
            },
            //添加学生方法
            addData() {
                this.isAdd = true;
                this.dialogFormVisible = true;
                this.user.id = "";
                this.user.name = "";
                this.user.password = "";
                this.user.phone = "";
            },
            getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) {
                        return pair[1];
                    }
                }
                return (false);
            },
            searchData() {
                //防止传入坐标错误,进行修改
                let pos = 0;
                if (pos <= 0) {
                    pos = 0;
                }
                if (pos >= this.total) {
                    if (this.total % this.pageSize == 0) {
                        pos = this.total - this.pageSize;
                    } else {
                        pos = this.total - this.total % this.pageSize;
                    }
                }
                this.pos = pos;
                this.isSearch = true;
                if (this.pos != 0) this.pos = 0;
                this.currPage = 0;
                //使用 axios 调用后台接口
                var url = "/api/teacher?pos=" + this.pos + "&rows=" + this.pageSize + "&search=" + this.search;
                axios.get(url).then(res => {
                    //将数据绑定对应属性中
                    this.productList = res.data.list;
                    this.total = parseInt(res.data.total);
                    //设置最大页数,向下取整
                    this.maxPage = Math.ceil(this.total / this.pageSize);
                }).catch(err => {
                    console.log("error");
                })
            },
            timetable(row) {
                this.$router.push({
                    path: "/table/teacherlist/teachertimetable",//跳转路由
                    query: {//参数对象
                        id: row.id
                    }
                });
            }

        },
        created() {
            //created  表示页面加载完毕，立即执行
            console.log(this.isFather)
            this.id = this.getQueryVariable("teacherId");
            this.pageHandler(0);
            this.clientWidth = document.body.clientWidth;
        }
    };
</script>

<style lang="scss" scoped>
</style>
